<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>消息</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="/css/letterstyle.css" rel="stylesheet" type="text/css"/>
        <script src="/js/plugins/jquery/jquery.min.js"></script>
        <script src="/js/plugins/jrender/jrender.min.js"></script>
        <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
        <script src="/js/plugins/dialog2/dialog.min.js"></script>
        <style>
            .spanlocation{
                float: right;
                color: #fff;
                background-color: #dc3545;
                padding-right: .6em;
                padding-left: .6em;
                border-radius: 10rem;
                display: inline-block;
                padding: .25em .4em;
                font-size: 75%;
                font-weight: 700;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
            }
        </style>
        <script>
            $(function () {
                //定时器跟新数据 拿到所有未读

                //获取当前登录用户的(session)信息
                var user=JSON.parse(sessionStorage.getItem("user"));
                //要查信息状态
                //当前页的input框
                var currentInput = $('#currentPage');
                //用于存储游记的数组容器
                var travelArr = [];
                //总页数
                var pages ;
                //获取我的游记数据
                function query(){
                    //获取当前页的值
                    var currentPage = currentInput.val();
                    $.get('/users/'+user.id+'/letters',{currentPage:currentPage},function (data) {
                        //合并两个数组
                        console.log(data);
                        $.merge(travelArr,data.list);
                        var json = {list:travelArr}//将数组封装成一个json对象,属性名为loop渲染指定的list
                            //未读内容渲染
                        console.log(json);
                        $('#loop').renderValues(json,{
                            'getUnderCount':function(item,value) {
                                //如果状态为1就是已读 去掉标签
                                if(value != 0){
                                    $(item).remove();
                                }
                            }
                        });
                        //绑定点击就修改信息状态
                        $('.aui-flex').click(function () {
                            //把样式去掉
                            $(this).find('.spanlocation').remove();
                            //然后发送ajax 去修改 状态
                            var sendId = $(this).data('sendid');
                            //查到对话人的 昵称
                            var acceptName = $(this).find('h2').html();
                            //查到对话人的头像
                            var acceptHeadImgUrl = $(this).find('img').attr('src');
                            $.ajax({
                                url:'/letter',
                                data:"acceptId="+user.id+"&state=1"+"&sendId="+sendId,
                                type:'put',
                                success:function () {
                                    //跳转到具体聊天 页面 讲聊天人的 id和名字和头像带过页面
                                    window.location.href='/mine/chat.html?acceptId='+sendId +'&acceptName='+acceptName+'&acceptHeadImgUrl='+acceptHeadImgUrl+'&';
                                }
                            });
                        })
                        //从pageInfo中获取总页数,并设置
                        pages = data.pages;
                    },'json');

                    //当前页input框+1维护,不能用函数内的变量
                    currentInput.val(parseInt(currentPage)+1);//字符串记得转成数字
                }

                //当页面滚动条变化时,执行的函数
                $(window).scroll(function () {
                    if ($(document).scrollTop()+$(window).height()>=$(document).height()){
                        //获取当前页
                        var currentPage = currentInput.val();
                        //判断是否大于最后一页
                        if (currentPage<=pages){
                            console.log(currentPage);
                            console.log(pages);
                            query();
                        }else {//最后一页,提示
                            $(document).dialog({
                                type : 'notice',
                                infoText: '到底',
                                autoClose: 1500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                        }
                    }
                });
                //默认查一次
                query();
            })
        </script>
    </head>
    <body>


        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed b-line">
                <a href="javascript:history.go(-1);" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">私信中心</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                </a>
            </header>
            <section class="aui-scrollView">
              <!--  <div class="aui-palace">
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/head-logo-001.png" alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>服务通知</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/head-logo-002.png" alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>精彩活动</h2>
                        </div>
                    </a>
                    <a href="javascript:;" class="aui-palace-grid">
                        <div class="aui-palace-grid-icon">
                            <img src="images/head-logo-003.png" alt="">
                        </div>
                        <div class="aui-palace-grid-text">
                            <h2>互动通知</h2>
                        </div>
                    </a>

                </div>-->
                <input type="hidden" name="currentPage" id="currentPage" value="1"/>
                <!--<div class="divHeight"></div>-->
                <div id="loop">
                <div class="aui-list-box" render-loop="list" >
                    <a href="javascript:;" class="aui-flex" render-attr="data-sendid=list.u1_id">
                        <div class="aui-flex-logo">
                            <img render-src="list.u1_headImgUrl" alt="" >
                        </div>
                        <div class="aui-flex-box">
                            <h2 render-html="list.u1_nickName"></h2>
                            <span class="spanlocation"  render-fun="getUnderCount" render-key="list.state"  render-html="list.count(0)" >1</span>
                            <h3 render-html="list.content"></h3>
                        </div>
                        <span class="aui-flex-add" render-html="list.createTime">
                        </span>
                    </a>
                </div></div>
            </section>
        </section>

    </body>
</html>
